
import {Component, ElementRef, Host, Input, OnInit} from '@angular/core';

import * as Swiper from 'swiper';

@Component({
  selector: 'app-swiper-container',
  templateUrl: './swiper.html',
  styleUrls: [ './swiper.css'],
})
export class SwiperContainerComponent implements OnInit{

  @Input() options: SwiperOptions;


  public swiper: Swiper;


  constructor( private elementRef: ElementRef) {

  }

  ngOnInit() {

    let options = Object.assign({
      pagination: '.swiper-pagination',
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev'

    }, this.options);

    const nativeElement = this.elementRef.nativeElement;
    this.swiper = new Swiper(nativeElement.children[0], options);
  }

  update() {
        if (this.swiper){
            this.swiper.update();
        }
  }

}

@Component({
      selector: 'app-swiper-slide',
      template: '<div class="img-box"><ng-content></ng-content></div>',
      styles:[]
})
export class SwiperSlideComponent {

  private ele: HTMLElement;

  constructor( elementRef: ElementRef, @Host() swiper: SwiperContainerComponent) {

    this.ele = elementRef.nativeElement;
    this.ele.classList.add('swiper-slide');

    swiper.update();
  }
}
